<template>
  <div class="app-container">
    <el-table :data="tableData" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="游戏名称" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.gameName}}
        </template>
      </el-table-column>
      <el-table-column label="类别" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.subType | toConverter('DIGITAL_GAME_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center" width="220px">
        <template slot-scope="{row}">
          <img :src="row.logo" style="max-width: 200px;max-height: 200px"/>
        </template>
      </el-table-column>
      <el-table-column label="游戏线数" align="center">
        <template slot-scope="{row}">
          {{row.lineNum}}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          {{row.status === 0 ? '开启' : '关闭'}}
        </template>
      </el-table-column>
      <el-table-column label="新建时间" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.createDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.lastUpdate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="text" @click="toggleStatus(row, 'open')" v-if="row.status !==0 && roleCheck(gameManageRoleType.ptSwitch)">
            开启
          </el-button>
          <el-button type="text" @click="toggleStatus(row, 'close')" v-else-if="roleCheck(gameManageRoleType.ptSwitch)">关闭</el-button>
          <el-button v-if="roleCheck(gameManageRoleType.ptEdit)" type="text"
                     @click="openDialog({props: row, dialogName: 'sub-game-edit'})">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-transfer-dom>
      <el-dialog :visible.sync="dialogVisible"
                 v-if="dialogVisible && dialogName === 'sub-game-edit'"
                 :before-close="() => {dialogVisible = false}">
        <sub-game-edit style="max-height:60vh; overflow: auto"
                       :game-id="dialogProps.gameId"
                       :game-name="dialogProps.gameName"
                       :sub-type="dialogProps.subType"
                       :logo="dialogProps.logo"
                       :line-num="dialogProps.lineNum"
                       @on-success="dialogVisible = false;doGet({action: 'getGrid'})"
                       v-if="dialogName === 'sub-game-edit'"/>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { form, grid, dialog } from '@/build';

import {
  gameManagerSubGameToggleStatusApi as toggleApi,
  gameManagerSubGameListApi as listApi,
} from '@/services/api/game';

import SubGameEdit from './subGameEdit';
import { gameManageRoleType } from '@/router/gameRoutes';

export default {
  name: 'sub-game-manager',

  mixins: [form, grid, dialog],

  components: {
    SubGameEdit,
  },

  props: ['game-id', 'gameName', 'channelId'],

  data() {
    return {
      gameManageRoleType,
      tableData: [],
      filters: {
        channelId: this.channelId,
        gameType: 3,
        subType: this.gameId,
      },
    };
  },

  methods: {
    toggleStatus({ gameId, status }, type = 'open') {
      const display = type === 'open' ? '开启' : '关闭';

      this.$confirm(`确定要${display}此电子游戏吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        toggleApi({
          gameId,
          status: status === 0 ? 1 : 0,
        }).then(([result, data]) => {
          if (result) {
            this.getAll();
            this.$message({
              type: 'success',
              message: `${display}成功!`,
            });
          } else {
            this.$message({
              type: 'error',
              message: `${display}失败!${data.message}`,
            });
          }
        });
      })
        .catch(() => {
        });
    },
  },

  mounted() {
    // tab页记录访问日志
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, this.gameName, true) });
    this.bindGet(listApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });

    this.getAll();
  },
};
</script>
